<form method="POST"
      action=""
      class="tlp-modal"
      role="dialog"
      id="project-admin-services-edit-modal-{{ id }}"
      aria-labelledby="project-admin-services-edit-modal-{{ id }}-title"
>
    <div class="tlp-modal-header">
        <h1 class="tlp-modal-title" id="project-admin-services-edit-modal-{{ id }}-title">
            <i class="fa fa-pencil tlp-modal-title-icon"></i>
            {{# gettext }} Edit service {{/ gettext }}
        </h1>
        <div class="tlp-modal-close" data-dismiss="modal" aria-label="{{# gettext }}Close{{/ gettext }}">
            ×
        </div>
    </div>
    <div class="tlp-modal-body">
        {{# csrf }}
            {{> csrf_token_input }}
        {{/ csrf }}
        <input type="hidden" name="group_id" value="{{ project_id }}">
        <input type="hidden" name="service_id" value="{{ id }}">
        <input type="hidden" name="action" value="edit">

        {{# short_name }}
            <input type="hidden" name="short_name" value="{{ short_name }}">
        {{/ short_name }}

        {{# is_read_only }}
            <div class="tlp-property">
                <label class="tlp-label">{{# gettext }}Label{{/ gettext }}</label>
                <p>{{ label }}</p>
                <input type="hidden" name="label" value="{{ label }}">
            </div>
        {{/ is_read_only }}
        {{^ is_read_only }}
            <div class="tlp-form-element">
                <label class="tlp-label" for="project-admin-services-edit-modal-{{ id }}-label">
                    {{# gettext }}Label{{/ gettext }}
                    <i class="fa fa-asterisk"></i>
                </label>
                <input type="text"
                       class="tlp-input"
                       id="project-admin-services-edit-modal-{{ id }}-label"
                       name="label"
                       placeholder="{{# gettext }}My service{{/ gettext }}"
                       size="30"
                       maxlength="40"
                       required
                       value="{{ label }}">
            </div>
        {{/ is_read_only }}

        <div class="tlp-form-element {{^ is_link_customizable }} tlp-form-element-disabled {{/ is_link_customizable }}">
            <label class="tlp-label" for="project-admin-services-edit-modal-{{ id }}-link">
                {{# gettext }}Link{{/ gettext }}
                <i class="fa fa-asterisk"></i>
            </label>
            <input type="text"
                   class="tlp-input"
                   id="project-admin-services-edit-modal-{{ id }}-link"
                   name="link"
                   placeholder="https://example.com/my-service/"
                   maxlength="255"
                   pattern="(https?://|#|/|\?).+"
                   title="{{# gettext }}Please, enter a http:// or https:// link{{/ gettext }}"
                   required
                   value="{{ link }}"
                   {{^ is_link_customizable }} disabled {{/ is_link_customizable }}
            >
        </div>

        {{# can_see_shortname }}
            <div class="tlp-property">
                <label class="tlp-label">{{# gettext }}Short name{{/ gettext }}</label>
                <p>{{ short_name }}</p>
            </div>
        {{/ can_see_shortname }}

        {{# is_read_only }}
                <div class="tlp-property">
                    <label class="tlp-label">{{# gettext }}Description{{/ gettext }}</label>
                    <p>{{ label }}</p>
                    <input type="hidden" name="description" value="{{ description }}">
                </div>
        {{/ is_read_only }}
        {{^ is_read_only }}
            <div class="tlp-form-element">
                <label class="tlp-label" for="project-admin-services-edit-modal-{{ id }}-description">
                    {{# gettext }}Description{{/ gettext }}
                </label>
                <input type="text"
                       class="tlp-input"
                       id="project-admin-services-edit-modal-{{ id }}-description"
                       name="description"
                       placeholder="{{# gettext }}Awesome service to manage extra stuff{{/ gettext }}"
                       size="70"
                       maxlength="255"
                       value ="{{ description }}">
            </div>
        {{/ is_read_only }}

        <hr class="tlp-modal-separator">

        {{# can_update_is_active }}
            <div class="tlp-form-element">
                <label class="tlp-label tlp-checkbox">
                    <input type="checkbox" name="is_active" value="1" {{# is_active }}checked{{/is_active}}>
                    {{# gettext }}Available (also available for new projects){{/ gettext }}
                </label>
            </div>
        {{/ can_update_is_active }}
        {{^ can_update_is_active }}
            <input type="hidden" name="is_active" value="{{# is_active }}1{{/ is_active }}{{^ is_active }}0{{/ is_active }}">
        {{/ can_update_is_active }}

        <div class="tlp-form-element">
            <label class="tlp-label tlp-checkbox">
                <input type="checkbox"
                       name="is_used"
                       value="1"
                       {{# is_used }}checked{{/ is_used }}
                       data-test="service-{{ short_name }}-is-used"
                >
                {{# gettext }}Enabled{{/ gettext }}
            </label>
        </div>

        {{# is_scope_project }}
            <div class="tlp-form-element">
                <label class="tlp-label tlp-checkbox">
                    <input type="checkbox" name="is_in_iframe" value="1" {{# is_in_iframe }}checked{{/ is_in_iframe }}>
                    {{# gettext }}Display in iframe{{/ gettext }}
                </label>
            </div>
        {{/ is_scope_project }}

        <div class="tlp-form-element">
            <label class="tlp-label" for="project-admin-services-edit-modal-{{ id }}-rank">
                {{# gettext }}Rank{{/ gettext }}
                <i class="fa fa-asterisk"></i>
            </label>
            <input type="number"
                   class="tlp-input"
                   id="project-admin-services-edit-modal-{{ id }}-rank"
                   name="rank"
                   placeholder="150"
                   size="5"
                   maxlength="5"
                   {{# is_summary }}
                       readonly
                   {{/ is_summary }}
                   {{^ is_summary }}
                       min="{{ minimal_rank }}"
                   {{/ is_summary }}
                   required
                   value="{{ rank }}">
        </div>
    </div>
    <div class="tlp-modal-footer">
        <button type="reset" class="tlp-button-primary tlp-button-outline tlp-modal-action" data-dismiss="modal">
            {{# gettext }}Cancel{{/ gettext }}
        </button>
        <button
                type="submit"
                class="tlp-button-primary tlp-modal-action user-group-modal-button"
                data-test="save-service-{{ short_name }}-modifications"
        >
            <i class="fa fa-save tlp-button-icon"></i> {{# gettext }}Save modifications{{/ gettext }}
        </button>
    </div>
</form>
